<template>
  <a-config-provider :locale="locale">
    <router-view/>
  </a-config-provider>
</template>

<script>
import enquireScreen from './utils/device'
import {mapState} from 'vuex'
import themeUtil from '@/utils/themeUtil';
import {getI18nKey} from '@/utils/routerUtil';
export default {
  name: 'App',
  data() {
    return {
      locale: {}
    }
  },
  created () {
    this.setHtmlTitle()
    this.setLanguage(this.lang)
    enquireScreen(isMobile => {
      this.$store.commit('setting/setDevice', isMobile)
    })
  },
  mounted() {
   this.setWeekModeTheme(this.weekMode);
  },
  watch: {
    weekMode(val) {
      this.setWeekModeTheme(val)
    },
    lang(val) {
      this.setLanguage(val)
    },
    $route() {
      this.setHtmlTitle()
    },
    'theme.mode': function(val) {
      let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(this.theme.color, val).then(() => {
        setTimeout(closeMessage, 1000)
      })
    },
    'theme.color': function(val) {
      let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(val, this.theme.mode).then(() => {
        setTimeout(closeMessage, 1000)
      })
    }
  },
  computed: {
    ...mapState('setting', ['theme', 'weekMode', 'lang'])
  },
  methods: {
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add('week-mode')
      } else {
        document.body.classList.remove('week-mode')
      }
    },
    setLanguage(lang) {
      this.$i18n.locale = lang
      switch (lang) {
        case 'CN':
          this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
          break
        case 'HK':
          this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
          break
        case 'US':
        default:
          this.locale = require('ant-design-vue/es/locale-provider/en_US').default
          break
      }
    },
    setHtmlTitle() {
      const route = this.$route
      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
    },
  }
}
</script>

<style lang="less">
  .l7-ctrl-logo{
    display: none!important;
  }
  /**{*/
  /*  &::-webkit-scrollbar {*/
  /*    !*滚动条整体样式*!*/
  /*    width : 0px;  !*高宽分别对应横竖滚动条的尺寸*!*/
  /*    height: 0px;*/
  /*  }*/
  /*  &:hover{*/
  /*    &::-webkit-scrollbar {*/
  /*      !*滚动条整体样式*!*/
  /*      width : 5px;  !*高宽分别对应横竖滚动条的尺寸*!*/
  /*      height: 5px;*/
  /*    }*/
  /*  }*/

  /*  &::-webkit-scrollbar-thumb {*/
  /*    !*滚动条里面小方块*!*/
  /*    border-radius   : 3px;*/
  /*    background-color: skyblue;*/
  /*    background-image: -webkit-linear-gradient(*/
  /*            45deg,*/
  /*            rgba(255, 255, 255, 0.2) 25%,*/
  /*            transparent 25%,*/
  /*            transparent 50%,*/
  /*            rgba(255, 255, 255, 0.2) 50%,*/
  /*            rgba(255, 255, 255, 0.2) 75%,*/
  /*            transparent 75%,*/
  /*            transparent*/
  /*    );*/
  /*  }*/
  /*  &::-webkit-scrollbar-track {*/
  /*    !*滚动条里面轨道*!*/
  /*    background: transparent;*/
  /*  }*/
  /*}*/
  #id{
  }
  .ant-select-tree-dropdown::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  .ant-select-tree-dropdown::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
  }
  .ant-select-tree-dropdown::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
  }
  .ant-select-tree-dropdown:hover{
    &::-webkit-scrollbar-thumb {
      background-color: rgba(204,204,204,0.44);
    }
  }
  .ant-form-explain, .ant-form-extra{
    font-size: 12px!important;
  }
  .ant-form-item{
    margin-bottom: 18px!important;
  }
  .ant-form-item-with-help{
    margin-bottom: 0!important;
  }
  .ant-table-thead > tr > th {
    background: transparent !important;
    font-size: 14px;
  }
  .amap-logo{
    display: none!important;
  }
  .amap-copyright{
    display: none!important;
  }
  .ant-table-pagination.ant-pagination {
    margin: 15px !important;
  }
  .ant-form-item-label > label::after{
    content: "";
    opacity: 0!important;
  }
</style>
